<template>
  <div class="panel">
    <div class="titles">综合概览</div>
    <el-divider></el-divider>
    <div class="panel_list">
      <!-- 水环境模块 -->
      <div class="category">水环境</div>
      <div
        class="card-group"
        :style="{
          gridTemplateColumns: `repeat(auto-fill, minmax(120px, 1fr))`,
        }"
      >
        <div class="card" v-for="item in waterEnv" :key="item.title">
          <div class="card-num">{{ item.num }}</div>
          <div class="card-title">{{ item.title }}</div>
        </div>
      </div>

      <!-- 敏感点模块 -->
      <div class="category">敏感点</div>
      <div
        class="card-group"
        :style="{
          gridTemplateColumns: `repeat(auto-fill, minmax(120px, 1fr))`,
        }"
      >
        <div class="card" v-for="item in sensitivePoints" :key="item.title">
          <div class="card-num">{{ item.num }}</div>
          <div class="card-title">{{ item.title }}</div>
        </div>
      </div>

      <!-- 应急人员模块 -->
      <div class="category">应急人员</div>
      <div
        class="card-group"
        :style="{
          gridTemplateColumns: `repeat(auto-fill, minmax(120px, 1fr))`,
        }"
      >
        <div class="card" v-for="item in emergencyPersons" :key="item.title">
          <div class="card-num">{{ item.num }}</div>
          <div class="card-title">{{ item.title }}</div>
        </div>
      </div>

      <!-- 知识库模块 -->
      <div class="category">知识库</div>
      <div
        class="card-group"
        :style="{
          gridTemplateColumns: `repeat(auto-fill, minmax(120px, 1fr))`,
        }"
      >
        <div class="card" v-for="item in knowledgeBase" :key="item.title">
          <div class="card-num">{{ item.num }}</div>
          <div class="card-title">{{ item.title }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      waterEnv: [
        { num: "58家", title: "污染源" },
        { num: "10个", title: "水源地" },
        { num: "6个", title: "监测站" },
      ],
      sensitivePoints: [
        { num: "58家", title: "学校" },
        { num: "10家", title: "医院" },
        { num: "6个", title: "住宅" },
        { num: "58家", title: "政府" },
        { num: "10个", title: "水库" },
      ],
      emergencyPersons: [
        { num: "18人", title: "应急专家" },
        { num: "38人", title: "应急人员" },
      ],
      knowledgeBase: [
        { num: "4个", title: "应急预案" },
        { num: "354个", title: "危化品" },
        { num: "25个", title: "法律法规" },
        { num: "15家", title: "应急物资生产厂家" },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.panel {
  // padding: 20px;
  height: 100%;
  display: grid;
  grid-gap: 8px;
  grid-template-rows: auto auto 1fr;

  .titles {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .panel_list {
    overflow-y: auto;
    // max-height: 600px;
  }

  .category {
    font-size: 16px;
    font-weight: 600;
    margin: 15px 0 10px;
    color: #333;
  }

  .card-group {
    display: grid;
    gap: 15px;
    margin-bottom: 15px;
  }

  .card {
    border: 1px solid #eaeaea;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    padding: 10px 0;

    .card-num {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 5px;
    }

    .card-title {
      font-size: 14px;
      color: #666;
    }
  }
}
</style>
